<template>
  <div class="index-container">
    <el-row :gutter="20">
      <el-col
        v-for="(item, index) in iconList"
        :key="index"
        :xs="12"
        :sm="6"
        :md="3"
        :lg="3"
        :xl="3"
      >
        <router-link :to="item.link" target="_blank">
          <el-card class="icon-panel" shadow="never">
            <vab-icon
              :style="{ color: item.color }"
              :icon="['fas', item.icon]"
            ></vab-icon>
            <p>{{ item.title }}</p>
          </el-card>
        </router-link>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :lg="8" :md="12" :sm="24" :xl="6" :xs="24">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>
              <i class="el-icon-document"></i>
              新闻动态
            </span>
            <el-button style="float: right; padding: 3px 0" type="text">
              更多
            </el-button>
          </div>
          <div v-for="o in 5" :key="o" class="text item">
            {{ '列表内容 ' + o }}
          </div>
        </el-card>
      </el-col>
      <el-col :lg="8" :md="12" :sm="24" :xl="18" :xs="24">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>
              <i class="el-icon-s-flag"></i>
              通知公告
            </span>
            <el-button style="float: right; padding: 3px 0" type="text">
              更多
            </el-button>
          </div>
          <div v-for="o in 5" :key="o" class="text item">
            {{ '列表内容 ' + o }}
          </div>
        </el-card>
      </el-col>
      <el-col :lg="8" :md="12" :sm="24" :xl="18" :xs="24">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>
              <i class="el-icon-s-flag"></i>
              实施热点
            </span>
            <el-button style="float: right; padding: 3px 0" type="text">
              更多
            </el-button>
          </div>
          <div v-for="o in 5" :key="o" class="text item">
            {{ '列表内容 ' + o }}
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :lg="8" :md="12" :sm="24" :xl="6" :xs="24">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>
              <i class="el-icon-edit-outline"></i>
              待办列表
            </span>
            <el-button style="float: right; padding: 3px 0" type="text">
              更多
            </el-button>
          </div>
          <div v-for="o in 5" :key="o" class="text item">
            {{ '列表内容 ' + o }}
          </div>
        </el-card>
      </el-col>
      <el-col :lg="8" :md="12" :sm="24" :xl="18" :xs="24">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>
              <i class="el-icon-s-promotion"></i>
              已办列表
            </span>
            <el-button style="float: right; padding: 3px 0" type="text">
              更多
            </el-button>
          </div>
          <div v-for="o in 5" :key="o" class="text item">
            {{ '列表内容 ' + o }}
          </div>
        </el-card>
      </el-col>
      <el-col :lg="8" :md="12" :sm="24" :xl="18" :xs="24">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>
              <i class="el-icon-s-flag"></i>
              未读邮件
            </span>
            <el-button style="float: right; padding: 3px 0" type="text">
              更多
            </el-button>
          </div>
          <div v-for="o in 5" :key="o" class="text item">
            {{ '列表内容 ' + o }}
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  export default {
    name: 'Index',
    data() {
      return {
        //卡片图标
        iconList: [
          {
            icon: 'video',
            title: '视频监控系统',
            link: '/vab/player',
            color: '#91cc75',
          },
          {
            icon: 'table',
            title: '在线填表系统',
            link: '/vab/table/comprehensiveTable',
            color: '#5470c6',
          },
          {
            icon: 'laptop-code',
            title: '会议平台',
            link: 'https://github.com/chuzhixin/vue-admin-beautiful',
            color: '#fac858',
          },
          {
            icon: 'book',
            title: '档案管理平台',
            link: '',
            color: '#ee6666',
          },
          {
            icon: 'bullhorn',
            title: 'OA办公系统',
            link: '',
            color: '#ff85c0',
          },
          {
            icon: 'gift',
            title: '礼物',
            link: '',
            color: '#ffe68f',
          },

          {
            icon: 'balance-scale-left',
            title: '公平的世界',
            link: '',
            color: '#a4e0f7',
          },
          {
            icon: 'coffee',
            title: '休息一下',
            link: '',
            color: '#95de64',
          },
        ],
      }
    },
    created() {},
    beforeDestroy() {},
    mounted() {},
    methods: {},
  }
</script>
<style lang="scss" scoped>
  .index-container {
    padding: 0 !important;
    margin: 0 !important;
    background: #f5f7f8 !important;

    ::v-deep {
      .el-alert {
        padding: $base-padding;

        &--info.is-light {
          min-height: 82px;
          padding: $base-padding;
          margin-bottom: 15px;
          color: #909399;
          background-color: $base-color-white;
          border: 1px solid #ebeef5;
        }
      }

      .el-card__body {
        .echarts {
          width: 100%;
          height: 115px;
        }
      }
    }

    .card {
      ::v-deep {
        .el-card__body {
          .echarts {
            width: 100%;
            height: 305px;
          }
        }
      }
    }

    .bottom {
      padding-top: 20px;
      margin-top: 5px;
      color: #595959;
      text-align: left;
      border-top: 1px solid $base-border-color;
    }

    .table {
      width: 100%;
      color: #666;
      border-collapse: collapse;
      background-color: #fff;

      td {
        position: relative;
        min-height: 20px;
        padding: 9px 15px;
        font-size: 14px;
        line-height: 20px;
        border: 1px solid #e6e6e6;

        &:nth-child(odd) {
          width: 20%;
          text-align: right;
          background-color: #f7f7f7;
        }
      }
    }

    .icon-panel {
      height: 117px;
      text-align: center;
      cursor: pointer;

      svg {
        font-size: 40px;
      }

      p {
        margin-top: 10px;
      }
    }

    .bottom-btn {
      button {
        margin: 5px 10px 15px 0;
      }
    }
  }
</style>
